<template>
  <el-tooltip class="box-item" effect="dark" :content="name" placement="top-start">
    <div class="contain" :style="{ top: top, left: left }">{{ title }}人</div>
  </el-tooltip>
</template>

<script>
export default {
  name: 'TipBox',
  props: {
    name: {
      type: String,
      default: ''
    },
    title: {
      type: Number,
      default: 0
    },
    top: {
      type: String,
      default: '0'
    },
    left: {
      type: String,
      default: '0'
    }
  }
}
</script>

<style scoped lang="scss">
.contain {
  position: absolute;
  background-color: #11337a;
  width: 45px;
  text-align: center;
  line-height: 33px;
  font-weight: bold;
  font-size: 10px;
  color: #fff;
}
.contain::after {
  color: #11337a;
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent transparent #11337a;
  border-left-color: inherit;
  transform: rotate(90deg);
}
</style>
